﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>实训案例</title>

	<!-- IMPORT CSS -->
	<link rel="stylesheet" href="css/zhufengAnimate.min.css">
	<link rel="stylesheet" href="css/index.css">

	<!-- IMPORT JS -->
	<script src="js/zhufengAnimate.min.js"></script>
</head>

<body>
	<main class="mainBox" music="audio/remembrance_of_youth.m4a">
		<!-- 第一页 -->
		<div class="page1">
			<!-- AN属性是给当前元素设置动画：属性值和animation帧动画的值一致（动画名字统一参考ANIMATE动画库） -->
			<img src="image/index_1.png" alt="" AN="bounceInRight 1s both">
			<img src="image/index_2.png" alt="" AN="bounceInUp 1s both">
			<img src="image/index_3.png" alt="" AN="zoomIn 1s 2s both">
			<img src="image/index_4.png" alt="" AN="flip 1s both">
			<img src="image/index_5.png" alt="" AN="rotateIn 1s 1s both">
		</div>

		<!-- 第二页 -->
		<div class="page2">
			<img src="image/page2_2.png" alt="" AN="bounceInDown 1s both">
			<img src="image/page2_3.png" alt="" AN="bounceInUp 1s both">
			<img src="image/page2_4.png" alt="" AN="bounceInRight 1s both">
			<div class="text">
				<p AN="zoomIn 1s 1s both">三更灯火五更鸡</p>
				<p AN="zoomIn 1s 2s both">正式男儿读书时</p>
				<p AN="zoomIn 1s 3s both">黑发不知勤学早</p>
				<p AN="zoomIn 1s 4s both">白首方悔读书迟</p>
			</div>
			<div class="photo" AN="rollIn 1s 1s both">
				<img src="image/person_6.jpg" alt="" AN="fadeIn 1s 2s both">
			</div>
		</div>

		<!-- 第三页 -->
		<div class="page3">
			3
		</div>

		<!-- 第四页 -->
		<div class="page4">
			4
		</div>
	</main>
</body>

</html>
<!-- 
	MAIN-BOX是固定的结构，需要规划几页的内容，就在MAIN-BOX中增加多少个DIV
		1.每个DIV的样式类名都是“.page?”
		2.一定要在手机端（谷歌浏览器的手机模拟器端）演示效果
		3.需要音乐，只需要给MAIN-BOX设置MUSIC这个属性，属性值是音乐的路径地址（框架中实现了音乐播放的功能）
		4.每一页需要展示的内容，都写在对应的样式类为PAGE？的DIV中即可

		微信：13041086186   zhouxiaotian1990
 -->